<script setup>
import { ref } from 'vue';
const costPerWaterData=ref([{
  "waterrateid": '',
  "startvalue": '',
  "endvalue": '',
  "costperunit": '',
}])
const costPerElectricityData=ref([{
  "electricityrateid": '',
  "startvalue": '',
  "endvalue": '',
  "costperunit": '',
}])


import {waterRateListService,electricityRateListService,waterRateUpdateService,electricityRateUpdateService} from '@/api/utilitybill.js'
const getWaterRateList=async ()=>{
  let result=await waterRateListService();
  costPerWaterData.value=result.data;
}
const getElectricityRateList=async ()=>{
  let result=await electricityRateListService();
  costPerElectricityData.value=result.data;
}
getWaterRateList();
getElectricityRateList();
const dialogWaterRateVisible=ref(false);
const costPerWaterModel=ref({
  "waterrateid": '',
  "startvalue": '',
  "endvalue": '',
  "costperunit": '',
})
const showWaterRateDialog=(index,row)=>{
  dialogWaterRateVisible.value=true
  costPerWaterModel.value.costperunit=row.costperunit
  costPerWaterModel.value.startvalue=row.startvalue
  costPerWaterModel.value.endvalue=row.endvalue
  costPerWaterModel.value.waterrateid=row.waterrateid
}
const updateWaterRate=async ()=>{
  console.log(costPerWaterModel.value)
  await waterRateUpdateService(costPerWaterModel.value)
  dialogWaterRateVisible.value=false
  getWaterRateList()

}
const dialogElectricityRateVisible=ref(false);
const costPerElectricityModel=ref({
  "Electricityrateid": '',
  "startvalue": '',
  "endvalue": '',
  "costperunit": '',
})
const showElectricityRateDialog=(index,row)=>{
  dialogElectricityRateVisible.value=true
  costPerElectricityModel.value.costperunit=row.costperunit
  costPerElectricityModel.value.startvalue=row.startvalue
  costPerElectricityModel.value.endvalue=row.endvalue
  costPerElectricityModel.value.electricityrateid=row.electricityrateid
}
const updateElectricityRate=async ()=>{
  console.log(costPerElectricityModel.value)
  await electricityRateUpdateService(costPerElectricityModel.value)
  dialogElectricityRateVisible.value=false
  getElectricityRateList()
}

import useUserInfoStore from "@/stores/userInfo.js";
const userInfoStore = useUserInfoStore();

</script>
<template>
<el-container>
    <el-container>
      <el-header>
        水费梯度表
      </el-header>
      <el-main>
        <el-table :data="costPerWaterData" style="width: 100%" stripe >
          <el-table-column prop="waterrateid" label="水费阶梯" ></el-table-column>
          <el-table-column prop="startvalue" label="梯度开始" ></el-table-column>
          <el-table-column prop="endvalue" label="梯度结束" ></el-table-column>
          <el-table-column prop="costperunit" label="单位价格" ></el-table-column>
          <el-table-column label="操作" v-if="userInfoStore.userInfo.usertype===1">
            <template #default="scope">
              <el-button size="small" type="primary" @click="showWaterRateDialog(scope.$index, scope.row)">
                修改
              </el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-main>
      <el-header>
        电费梯度表
      </el-header>
      <el-main>
        <el-table :data="costPerElectricityData" style="width: 100%" stripe >
          <el-table-column  prop="electricityrateid" label="电费阶梯" ></el-table-column>
          <el-table-column  prop="startvalue" label="梯度开始" ></el-table-column>
          <el-table-column  prop="endvalue" label="梯度结束" ></el-table-column>
          <el-table-column  prop="costperunit" label="单位价格" ></el-table-column>
          <el-table-column label="操作" v-if="userInfoStore.userInfo.usertype===1">
            <template #default="scope">
              <el-button size="small" type="primary" @click="showElectricityRateDialog(scope.$index, scope.row)">
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog v-model="dialogWaterRateVisible"  width="500">
          <el-form :model="UpdateData" :rules="rules">
            <el-form-item  label="水费阶梯" :label-width="formLabelWidth">
              <el-input v-model="costPerWaterModel.waterrateid"   />
            </el-form-item>
            <el-form-item  label="梯度开始" :label-width="formLabelWidth">
              <el-input v-model="costPerWaterModel.startvalue"   />
            </el-form-item>
            <el-form-item  label="梯度结束" :label-width="formLabelWidth">
              <el-input v-model="costPerWaterModel.endvalue"   />
            </el-form-item>
            <el-form-item  label="单位价格" :label-width="formLabelWidth">
              <el-input v-model="costPerWaterModel.costperunit"   />
            </el-form-item>

          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="updateWaterRate">
                确认修改
              </el-button>
            </div>
          </template>
        </el-dialog>

        <el-dialog v-model="dialogElectricityRateVisible"  width="500">
          <el-form :model="UpdateData" :rules="rules">
            <el-form-item  label="电费梯度" :label-width="formLabelWidth">
              <el-input v-model="costPerElectricityModel.electricityrateid"   />
            </el-form-item>
            <el-form-item  label="梯度开始" :label-width="formLabelWidth">
              <el-input v-model="costPerElectricityModel.startvalue"   />
            </el-form-item>
            <el-form-item  label="梯度结束" :label-width="formLabelWidth">
              <el-input v-model="costPerElectricityModel.endvalue"   />
            </el-form-item>
            <el-form-item  label="单位价格" :label-width="formLabelWidth">
              <el-input v-model="costPerElectricityModel.costperunit"   />
            </el-form-item>

          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="updateElectricityRate">
                确认修改
              </el-button>
            </div>
          </template>
        </el-dialog>
      </el-main>
</el-container>

</el-container>
</template>

<style scoped lang="scss">

</style>